<template>
  <div class="plan-detail">
      <div class="detailImg">
          <!-- 点小图变大图 -->
        <div class="picbox">
            <img :src="ImgUrl">
            <div class="imgdetail">
                <div>
                    <p class="producttit">{{detailInfro.title}}</p>
                    <ul class="tipsList" v-if="detailInfro.likeTags">
                        <li class="tips" v-for="(item,index) in detailInfro.likeTags" :key="index">{{item}}</li>
                    </ul>
                </div>
                <div class="imglist">
                    <el-carousel  height="200px" :autoplay="false">
                        <el-carousel-item  class="el-car-item" v-for="(list, index) in dataList" :key="index">
                        <div  class="top-img"  v-for="(item,index2) in list" :key="index2" >
                            <img class="pic" :src="item" @click="goImgindex(item)" alt=""/>
                        </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
        <div class="plan-con">
            <!-- 富文本编辑渲染 -->
            <div>
                <p class="content-tit">方案简介</p>
                <div class="content" v-html="detailInfro.description"></div>
            </div>
            <!-- 应用场景 -->
            <div>
                <p class="content-tit">性能参数</p>
                <div class="performance" v-if="detailInfro.cateName">
                    <p>行业分类：</p>
                    <p class="performance-tit">{{detailInfro.cateName}}</p>
                </div>
                <div class="performance" v-if="detailInfro.ideCateName">
                    <p>开发平台：</p>
                    <p class="performance-tit">{{detailInfro.ideCateName}}</p>
                </div>
                <div class="performance" v-if="detailInfro.deliveryCateIdName">
                    <p>交付形式：</p>
                    <p class="performance-tit">{{detailInfro.deliveryCateIdName}}</p>
                </div>
                <div class="performance" v-if="detailInfro.performanceParameter">
                    <p>性能参数：</p>
                    <p class="performance-tit">{{detailInfro.performanceParameter}}</p>
                </div>
                <div class="performance" v-if="detailInfro.applicationScene">
                    <p>应用场景：</p>
                    <p class="performance-tit">{{detailInfro.applicationScene}}</p>
                </div>
            </div>
            <!-- 方案文档 -->
            <div v-if="filePath.length">
                <p class="content-tit">方案文档</p>
                <div class="performance" v-for="(item,index) in detailInfro.filePath" :key="index">
                    <p>附件{{index+1}}：</p>
                    <p class="plan-upload" @click="goUrl(item)">
                        <i class="el-icon-upload plan-url"></i>
                        <span>下载文档</span>
                        </p>
                </div>
            </div>

        </div>
    
      </div>
  </div>
</template>

<script>
import {getPlandetail} from "@/api/home.js";
export default {
    data() {
        return {
            id:'',
            dataList:[
            {
                img:require("@/assets/img/pic.png"),
                name:"MUP"
            },
            {
                img:require("@/assets/img/MA40H1S-R-200.jpg"),
                name:"功率器件"
            },
            {
                img:require("@/assets/img/pic.png"),
                name:"电源器件"
            },
            {
                img:require("@/assets/img/MA40H1S-R-200.jpg"),
                name:"模拟器件"
            },
            {
                img:require("@/assets/img/pic.png"),
                name:"MUP1"
            },
            {
                img:require("@/assets/img/MA40H1S-R-200.jpg"),
                name:"功率器件1"
            },
            {
                img:require("@/assets/img/pic.png"),
                name:"电源器件1"
            },
            {
                img:require("@/assets/img/MA40H1S-R-200.jpg"),
                name:"模拟器件1"
            },
            ],
            ImgUrl:'',
            // title:'',
            detailInfro:'',
            filePath:'',
        }
    },
    created(){
        this.handleImglist()
    },
    methods:{
        // 处理图片数据
        handleImglist(){
            this.id = this.$route.query.id;
            getPlandetail(this.id).then(res=>{
                console.log(res);
                if(res.code == 200){
                    this.detailInfro =  res.result;
                    this.ImgUrl = this.detailInfro.goodsCover;
                    this.filePath = this.detailInfro.filePath;
                    this.dataList =this.detailInfro.otherCover;
                    let newDataList = []
                    let current = 0
                    if(this.dataList && this.dataList.length>0){
                        for(let i=0;i<=this.dataList.length-1;i++){
                        if(i%4 !== 0 || i === 0 ){
                            if(!newDataList[current]){
                            newDataList.push([this.dataList[i]])
                            }else{
                            newDataList[current].push(this.dataList[i])
                            }
                        }else{
                            current++
                            newDataList.push([this.dataList[i]])
                        }
                        }
                    }
                    this.dataList = [...newDataList];
                    // console.log(this.dataList);
                }
            })
        },
        // 点击小图变大图
        goImgindex(ImgUrl){
            this.ImgUrl = ImgUrl;
            console.log(this.ImgUrl,'shuju');
        },
        // 方案下载
        goUrl(item){
            window.open(item,'_blank')
        }
    },
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.plan-detail{
    width: 62.5%;
    // background: #fff;
    // padding: 30px 20px 15px;
    border-radius: 5px;
    margin: 0 auto 98px;
    font-size: 15px;
    display: flex;
    .picbox{
        width: 100%;
        background: #fff;
        padding: 30px 20px 20px;
        display: flex;
        // box-shadow: 0 2px 10px rgba(124, 72, 117, 0.1);
        img{
            width: 250px;
            height: 250px;
            border: 1px solid #eee;
            display: block;
            margin-right: 20px;
        }
    }
    .imgdetail{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .imglist{
        width: 60%;
        .el-car-item {
        width: 100%;
        padding: 0 8% 0 12%;
        display: flex;
        .top-img{
            width:20%;
            height: 100%;
            margin-right: 5%;
            box-shadow: 0 2px 10px #ccc;
            cursor: pointer;
            &:nth-child(4n){
            margin-right: 0;
            }
            .pic{
            width: 100%;
            height: 100%;
            display: block;
            margin:0 auto 20px;
            }
        }
        .el-carousel__arrow{
            display: block !important;
        }
      }
    }
    .producttit{
        font-size: 20px;
        font-weight: bold;
        line-height: 28px;
        margin-bottom: 12px;
    }
    .plan-con{
        margin-top: 20px;
        width: 100%;
        background: #fff;
        padding: 50px 20px 15px;
    }
    .tipsList{
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 14px;
        flex-wrap: wrap;
        color: #606266;
        margin-bottom: 40px;
        cursor: pointer;
        .tips{
            padding: 3px 8px;
            color: #4370F3;
            border: 1px solid #ECF1FF;
            background: #ECF1FF;
            margin-right: 10px;
            border-radius: 5px;
            margin-bottom: 5px;
        }
        .model-tit{
            padding: 3px 8px;
            border: 1px solid #606266;
            margin-right: 10px;
            border-radius: 5px;
            &:hover{
                border-color: #E6A23C;
                color: #E6A23C;
            }
        }
    }
    .tipsmar{
        margin-bottom: 20px;
    }
    .content{
        width: 100%;
        font-size: 16px;
        line-height: 30px;
        font-weight: 400;
        text-align: justify;
       /deep/  strong{
            width: 100%;
            display: block;
            // border-bottom: 1px solid #ddd;
            font-size: 18px;
            line-height: 40px;
            color: #333;
            margin: 0 0 10px;
        }
        /deep/strong:after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 40px;
            height: 3px;
            background-color: #ed6d00;
        }
    }
    .content-tit{
        width: 100%;
        display: block;
        border-bottom: 1px solid #ddd;
        font-size: 24px;
        color: #004ea2;
        line-height: 60px;      
        margin: 0 0 20px;
    }
    .performance{
        width: 100%;
        display: flex;
        font-size: 16px;
        color: #333333;
        line-height: 28px;
        margin-bottom: 5px;
        cursor: pointer;
        .performance-tit{
            width: 90%;
            color: #666666;
            font-weight: normal;
            margin-left: 15px;
        }
        .plan-upload{
            display: flex;
            font-size: 15px;
            color: #666666;
            margin-left: 15px;
            &:hover{
                color: #409EFF;
                border-bottom: 1px solid #409EFF;
            }
            }
        .plan-url{
            font-size: 30px;
            font-weight: normal;
            margin-left: 15px;
        }

    }
}
</style>